<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            img{
                width: 100%;
            }
            main{
                width:600px;
                height: 200px;
                padding:20px;
                border:2px solid #999999;
                margin:20px auto 0px;
            }
            ul li{
                width: 200px;
                line-height: 40px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            a{
                font-size: 14px;
                text-decoration: none;
                color:black;
            }
            .current{
                background:red;
                color:paleturquoise;
            }
            div{
                display: none;
            }
            .txt{
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="images/top.jpg" alt="">
        <main >
            <ul>
                <li class="current">学党史</li>
                <li >知党情</li>
                <li>跟党走</li>
            </ul>
            <section>
                <div class="txt">
                    <br><br>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：传承好红色基因 把红色江山世世代代传下</a><br><br>
                    <a href="http://www.12371.cn/2021/04/05/ARTI1617594087987220.shtml" target="_blank">党史学习教育领导小组部署开展“我为群众办实事”实践活动</a><br><br>
                    <a href="http://www.12371.cn/2021/05/19/ARTI1621384597535287.shtml" target="_blank">庆祝建党100周年专论：从赶上时代到引领时代的伟大跨越</a><br><br>
                    <a href="http://www.12371.cn/2021/04/27/ARTI1619487233994182.shtml" target="_blank">中央宣讲团报告会重点内容大全 赶快收藏</a><br><br>
                </div>
                <div>
                    <br><br>
                    <a href="https://baijiahao.baidu.com/s?id=1686867677944951581&wfr=spider&for=pc" target="_blank">深刻认识党情，自觉遵守党性</a><br><br>
                    <a href="http://sichuan.zgdzllw.com/yibin/2020-10-14/63898.html" target="_blank">加强党员干部党史党情教育</a><br><br>
                </div>
                <div>
                    <br><br>
                    <a href="http://www.12371.cn/2021/02/22/ARTI1613959602334366.shtml" target="_blank">【峥嵘岁月】紧跟党走，铁人队伍永向前</a><br><br>
                    <a href="http://www.12371.cn/2019/03/18/ARTI1552871011294466.shtml" target="_blank"> 吴茂林：赤诚坚定跟党走</a><br><br>
                </div>
            </section>
            <script>
                var tags=document.getElementsByTagName('li');
                var boxs=document.getElementsByTagName('div');
                for(var i=0;i<tags.length;i++){
                    tags[i].index=i;

                    tags[i].onclick=function(){
                        for(var m=0;m<tags.length;m++){
                            tags[m].className='';
                            boxs[m].className='';
                        }
                        this.className='current';
                        var n=this.index;
                        boxs[n].className='txt'
                    }
                }
            </script>
        </main>
    </body>
</html>